<script lang="ts">
  export default {
    name: 'Shop_user',
  };
</script>

<script setup lang="ts">
  import { computed, onMounted, ref, unref } from 'vue';
  import { showConfirmDialog, showToast, showLoadingToast, closeToast } from 'vant';
  import { useRouter, useRoute } from 'vue-router'
  import API_BANNER from '@/apis/banner';
  import Address from '@/views/user/components/address.vue';
  import Order from '@/views/user/components/order.vue';
  import CouponCollectionCenter from '@/views/user/components/CouponCollectionCenter.vue';
  import storage from 'good-storage';
  let userInfo = storage.get('userInfo')
  onMounted(() => {


  });
  let router = useRouter()
  let route = useRoute()
  const active = ref(0);
</script>

<template>
  <div>
    <Shop_headers></Shop_headers>
    <div class="shopContainer">
      <div class="account">
        <div class="account_log">
          <van-image round width="40px" height="40px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          <div class="account_info">
            <div class="name">{{userInfo.username}}</div>
            <div>{{userInfo.email}}</div>
          </div>
        </div>
      </div>
      <div class="account_box">
        <div class="account_Nav">
          <van-sidebar v-model="active">
            <van-sidebar-item :title="$t('home.YouOrder')" />
            <van-sidebar-item :title="$t('home.YouAddress')" />
            <van-sidebar-item :title="$t('home.CouponCollectionCenter')" />
          </van-sidebar>
        </div>
        <div class="account_main">
          <Address v-if="active === 1"></Address>
          <Order v-if="active === 0"></Order>
          <CouponCollectionCenter v-if="active === 2"></CouponCollectionCenter>
        </div>
      </div>
    </div>
    <!-- <Shop_footer></Shop_footer> -->
  </div>
</template>

<style lang="less" scoped>
  .account_log {
    display: flex;
    align-items: center;
  }

  .account {
    padding: 20px;

    .account_info {
      margin-left: 8px;
      font-size: 12px;

      .name {
        font-weight: 700;
        font-size: 20px;
        color: #000;
      }
    }
  }

  .account_box {
    display: flex;

    .account_Nav {
      border: 1px solid #e5e5e5;
      margin: 0 10px;
      width: 320px;
    }

    .account_main {
      width: 100%;
    }
  }

  @media screen and (max-width: 768px) {
    .account_box {
      flex-direction: column;
      align-items: flex-start;

    }
  }
</style>
<style>
  :root:root {
    --van-sidebar-width: 320px;
  }
</style>